<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图-classTS</title>
<style type="text/css">
	*{
		margin:0;
		padding:0;
		box-sizing: border-box;
		color:#555;
		line-height: 1.5;
	}
	ul{
		list-style: none;
	}
	
	body{
		background-color: #ddd;
	}
	
	.commonBox{
		width:780px;
		margin:0 auto;
	}
	
	.title{
		padding:2rem 0 1rem !important;
		line-height: 2rem;
	}
	
	.danmu-box{
		position: relative;
		height:400px;
		
		background-color: #000;
	}
	
	.player{
		position: relative;
		z-index: 10;
		width:100%;
		height: 100%;
		padding:3rem;
		background:#555 center center no-repeat ;
		background-size:100% 100%;
		background-clip: content-box;
		
		filter: blur(.5px);
	}
	
	.track-box{
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height:100%;
		z-index: 100;
		background-color: rgba(100,100,100,.3);
		overflow: hidden;
	}
	
	.track-box li{
		position: relative;
		
	}
	
	.track-box span{
		position: absolute;
		left: 100%;
		top: 0;
		white-space:nowrap;
		color:#fff;
	}

	.track-box .zan{
		color:#FFF;
	}
	
	.opBox{
		padding:1rem;
		background-color: #EEE;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.danmuWriteBox > *{
		padding:0 .5rem;
		height: 30px;
		line-height: 30px;
		border:0;
		outline-width: 0;
	}
	
	.danmuWriteBox button{
		cursor: pointer;
		background-color: #ccc;
	}
	
	
	</style>
</head>
<body>
  	
<h3 class="title commonBox">暑期影院：正在播放中</h3>

<div class="danmu-box commonBox">
	
	<!-- 视频 -->
	<div class="player">
		
	</div>
	
	<!-- 轨道 -->
	<ul class="track-box">
		<li>
			<span id="active">这是一条弹幕</span>
		</li>
	</ul>
	
</div>

<div class="opBox commonBox">
	<div class="danmuWriteBox">
		<input id="myDanmu" type="text" />
		<button id="myDanmuButton" type="button">发送弹幕</button>
	</div>
	
	<div class="danmuOtherBox">
		开启/关闭
	</div>
</div>



<script src="./danmu.js">


</script>
</body>
</html>